<template>
    <div class="home">
        <div>{{ count }}</div>
        <button @click="countDowm" style="width:10%;">保存</button>
    </div>
</template>

<script>
export default {
    name: 'ShareCode',
    data() {
        return {
            show: false,
            timer:null,
            title: '微信公众号保存分享图片',
            count: 60
        }
    },
    methods: {
        btnClick() {
            this.show = true
        },
         countDowm() {
            console.log('>>'+this.count)
            this.timer = setInterval(()=> {
                console.log(this.count)
                this.count--
                if (this.count == 0) {
                    this.count = 60
                    clearTimeout(this.timer)
                }
            }, 1000)
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.home {
    height: 100vw;
    height: 100vh;
    color: #000;
    font-size: 48px;
    display: flex;
    flex-direction: column;

}

@keyframes typing {
    from {
        width: 0;
    }
}

@keyframes caret {
    50% {
        border-color: transparent;
    }
}

.shareTitle {
    position: relative;
    left: 10%;
    top: 10%;
    width: 7em;
    height: 1.5em;
    overflow: hidden;
    white-space: nowrap;
    border-right: 1px solid black;
    color: black;
    animation: 3s typing steps(7),
        1s caret steps(1) infinite;
}
</style>
